<script setup>
import request from '@/utils/request'
import { Delete, EditPen, Plus } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue'

const tableData = ref([])
const total = ref(0)
onMounted(() => {
    // getBookInfo()
    select()
})

const currentPage = ref(1)
const pageSize = ref(5)

const handleSizeChange = (val) => {
    pageSize.value = val

}
const handleCurrentChange = (val) => {
    currentPage.value = val
}
watch([currentPage, pageSize], () => {
    select()
})

const form = ref({
    bookname: '',
    type: ''
})

const select = async () => {
    const res = await request.get('/select', {
        params: {
            bookname: form.value.bookname,
            type: form.value.type,
            page: currentPage.value,
            pageSize: pageSize.value
        }
    })
    tableData.value = res.data.data.record
    total.value = res.data.data.total
}

const reset = () => {
    form.value.bookname = ''
    form.value.type = ''
    currentPage.value = 1
    select()
}

const dialog = ref(false)

const add = () => {
    dialog.value = true
}

const bookForm = ref({
    bookname: '',
    type: '',
    author: '',
    price: '',
    image: '',
    inventory: ''
})

const deletebook = async (id) => {
    // console.log(id)
    await request.delete('/delete', {
        params: {
            id
        }
    })
    ElMessage({
        type: 'success',
        message: '删除成功'
    })
    select()
}

const imgUrl = ref('')

const uploadFile = async (data) => {
    const File = data.file
    // console.log(File)
    // let formDataInfo = new FormData();
    // formDataInfo.append("file", File);
    const res = await request.post('/upload', { file: File }, {
        headers: {
            "content-type": "multipart/form-data"
        }
    })
    imgUrl.value = res.data.data
}

const loadFileSuccess = () => {
    ElMessage({
        type: 'success',
        message: '上传图片成功'
    })
    bookForm.value.image = imgUrl.value
}

const goForm = async () => {
    console.log(bookForm.value)
    await request.post('/add', bookForm.value)
    ElMessage({
        type: 'success',
        message: '上传成功'
    })
    dialog.value = false
    bookForm.value = {
        bookname: '',
        type: '',
        author: '',
        price: '',
        image: '',
        inventory: ''
    }
    select()
}

const dialog2 = ref(false)

const editbook = async (id) => {
    dialog2.value = true
    const res = await request.get('/findBook', {
        params: {
            id
        }
    })
    console.log(res)
    bookForm.value = res.data.data
    imgUrl.value = res.data.data.image
}

const goForm2 = async () => {
    // console.log(bookForm.value)
    await request.post('/updata', bookForm.value)
    ElMessage({
        type: 'success',
        message: '更新成功'
    })
    dialog2.value = false
    imgUrl.value = ''
    bookForm.value = {
        bookname: '',
        type: '',
        author: '',
        price: '',
        image: '',
        inventory: ''
    }
    select()
}
</script>
<template>
    <h1 class="title">->书籍管理</h1>
    <el-form :model="form" :inline="true" class="form">
        <el-form-item label="书名:">
            <el-input v-model="form.bookname" placeholder="请输入查找书名" />
        </el-form-item>
        <el-form-item label="类型:">
            <el-input v-model="form.type" placeholder="请输入查找类型" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="select">查找</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="success" circle :icon="Plus" @click="add"></el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="bookname" label="书名" width="300" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="image" label="图片">
            <template #default="{ row }">
                <img :src="row.image" alt="" style="width: 80px;height: 90px">
            </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="price" label="价格">
            <template #default="{ row }">
                &yen;{{ row.price.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="inventory" label="库存" />
        <el-table-column label="编辑">
            <template #default="{ row }">
                <el-button type="primary" circle :icon="EditPen" @click="editbook(row.id)"></el-button>
                <el-button type="danger" circle :icon="Delete" @click="deletebook(row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" class="page">
    </el-pagination>

    <el-dialog v-model="dialog" title="新增书籍" width="500">
        <el-form :model="bookForm" label-position="right">
            <el-form-item label="书籍名称">
                <el-input v-model="bookForm.bookname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="书籍类型">
                <el-select v-model="bookForm.type" placeholder="书籍类型">
                    <el-option label="名著" value="1" />
                    <el-option label="小说" value="2" />
                    <el-option label="教育" value="3" />
                    <el-option label="历史" value="4" />
                    <el-option label="传记" value="5" />
                    <el-option label="漫画" value="6" />
                </el-select>
            </el-form-item>
            <el-form-item label="书籍作者">
                <el-input v-model="bookForm.author" autocomplete="off" />
            </el-form-item>
            <el-form-item label="书籍单价">
                <el-input v-model="bookForm.price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="bookForm.inventory" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上传图片">
                <el-upload class="avatar-uploader" :http-request="uploadFile" :on-success="loadFileSuccess"
                    :show-file-list="false">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog = false">取消</el-button>
                <el-button type="primary" @click="goForm">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="dialog2" title="编辑书籍" width="500">
        <el-form :model="bookForm" label-position="right">
            <el-form-item label="书籍名称">
                <el-input v-model="bookForm.bookname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="书籍类型">
                <el-select v-model="bookForm.type" placeholder="书籍类型">
                    <el-option label="名著" value="1" />
                    <el-option label="小说" value="2" />
                    <el-option label="教育" value="3" />
                    <el-option label="历史" value="4" />
                    <el-option label="传记" value="5" />
                    <el-option label="漫画" value="6" />
                </el-select>
            </el-form-item>
            <el-form-item label="书籍作者">
                <el-input v-model="bookForm.author" autocomplete="off" />
            </el-form-item>
            <el-form-item label="书籍单价">
                <el-input v-model="bookForm.price" autocomplete="off" />
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="bookForm.inventory" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上传图片">
                <el-upload class="avatar-uploader" :http-request="uploadFile" :on-success="loadFileSuccess"
                    :show-file-list="false">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialog2 = false">取消</el-button>
                <el-button type="primary" @click="goForm2">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped lang="scss">
.title {
    // text-align: center;
    margin-left: 8px;
}

.form {
    margin-top: 38px;
}

.table {
    width: 100%;
}

.page {
    margin-top: 18px;
    float: right;
    margin-right: 38px;
}

.avatar-uploader .el-upload {
    border: 1px dashed aqua;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: aqua;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 200px;
    text-align: center;
    border: 2px solid aqua;
}
</style>